<template>
  <el-container>
    <el-aside width="180px" class="aside">
      <el-menu
        :default-active="currentSelectedIndex.toString()"
        background-color="#444444"
        text-color="#fff"
        active-text-color="#32cd32"
      >
        <el-menu-item
          v-for="(item,index) in games"
          :index="index.toString()"
          @click="clickGameItem(index)"
        >
          <span>
            <img style="width:20px;height:20px;" :src="$imagePath+item.icon" alt />
          </span>
          <span slot="title" style="margin-left:8px;font-size:15px;">{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main style="padding:0" v-if="currentSelectedIndex>-1">
        <iframe
          ref="frame"
          frameborder="0"
          width="100%"
          scrolling="no"
          style=" overflow-x:hidden; overflow-y:hidden;min-height:20000px; "
          :src="$htmlPath+games[currentSelectedIndex].home_page"
        ></iframe>
      </el-main>
      <el-footer class="footer">
        <div v-if="currentSelectedIndex>-1">
          <el-row v-show="!games[currentSelectedIndex].isDownloading">
            <el-col :span="24" style="display: flex;justify-content: flex-end;">
              <div
                v-show="games[currentSelectedIndex].isDownloaded"
                class="start-game-btn"
                @click="startGame"
              >启 动</div>
              <div
                v-show="!games[currentSelectedIndex].isDownloaded"
                class="dl-game-btn"
                @click="download"
              >下 载</div>
            </el-col>
          </el-row>

          <el-row v-show="games[currentSelectedIndex].isDownloading">
            <el-col
              :span="24"
              style="height:60px;display: flex;justify-content: flex-end;align-items:center;"
            >
              <el-progress
                style="width:400px;margin-right:10px;"
                :stroke-width="10"
                :percentage="games[currentSelectedIndex].percentage"
                color="#ffc900"
              ></el-progress>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>
<script>
import dl from "@/modules/download.js";
import set from "@/modules/set";
import fs from "@/modules/fs";
import path from "path";
import { mapGetters } from "vuex";
const { execFile, exec } = require("child_process");
export default {
  data() {
    return {
      test: false,
      currentSelectedIndex: -1,
      downloadPath: "",
      installPath: ""
    };
  },
  methods: {
    startGame() {
      let game = this.games[this.currentSelectedIndex];
      let gamePath = path.join(this.installPath, game.app_name);
      console.log(gamePath);

      execFile(gamePath, [], {
        detached: true, //让父进程退出后，子进程能独立运行
        shell: process.platform === "win32",
        windowsHide: true
      });
    },
    download() {
      this.games[this.currentSelectedIndex].isDownloading = true;
      dl.downloadFile(
        this.games[this.currentSelectedIndex].down_url,
        this.downloadPath,
        this.installPath,
        (arg, percentage) => {
          if (!arg.isDownloaded) {
            percentage = Math.ceil(percentage);
            // 显示进度
            this.games[this.currentSelectedIndex].percentage = percentage;
          } else if (arg.isDownloaded) {
            // 通知完成
            this.games[this.currentSelectedIndex].isDownloaded = true;
            this.games[this.currentSelectedIndex].isDownloading = false;
          }
        }
      );
    },
    clickGameItem(index) {
      this.currentSelectedIndex = index;
      let game = this.games[index];
      if (fs.existsSync(path.join(this.installPath, game.app_name))) {
        game.isDownloaded = true;
      } else {
        game.isDownloaded = false;
      }
    }
  },
  mounted() {
    let config = set.getConfig();
    this.downloadPath = config.downloadPath;
    this.installPath = config.installPath;

    if (this.games.length > 0) {
      this.clickGameItem(0);
      this.currentSelectedIndex = 0;
    }
  },
  computed: {
    ...mapGetters(["games"])
  }
};
</script>
<style scoped>
.el-menu {
  border: none;
}
.start-game-btn {
  width: 200px;
  height: 60px;
  line-height: 60px;
  background-color: #fcbf26;
  color: #fff;
  font-size: 23px;
  text-align: center;
  cursor: pointer;
}
.start-game-btn:hover {
  background-color: #fdc843;
  font-size: 24px;
}
.start-game-btn:active {
  background-color: #fcbf26;
  font-size: 23px;
}

.dl-game-btn {
  width: 200px;
  height: 60px;
  line-height: 60px;
  background-color: #0fcc18;
  color: #fff;
  font-size: 23px;
  text-align: center;
  cursor: pointer;
}
.dl-game-btn:hover {
  background-color: #0fcc18;
  font-size: 24px;
}
.dl-game-btn:active {
  background-color: #0fcc18;
  font-size: 23px;
}
</style>